<template>
	<div class="comment-post">
		<van-field class="post-field" v-model.trim="message" rows="2" autosize type="textarea" maxlength="50"
			placeholder="请输入留言" show-word-limit />
		<van-button class="post-btn" @click="onPostComment" :disabled="!message.length">发布</van-button>
	</div>
</template>

<script>
	import {
		addComment
	} from '@/api/comment.js'

	export default {
		components: {},
		props: {
			target: {
				type: [Number, String, Object],
				required: true
			}
		},
		data() {
			return {
				message: ''
			}
		},
		created() {},
		methods: {
			async onPostComment() {
				this.$toast.loading({
					message: '发布中...',
					forbidClick: true,
					duration: 0
				})

				try {
					const {
						data: res
					} = await addComment({
						target: this.target,
						content: this.message,
						art_id: null
					})

					this.message = ''
					this.$emit('postSuccess', res.data)

					this.$toast.success('发布评论成功')
				} catch (e) {
					this.$toast.fail('发布评论失败')
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.comment-post {
		display: flex;
		align-items: center;
		padding: 32px 0 32px 32px;

		.post-field {
			background-color: #f5f7f9;
		}

		.post-btn {
			width: 150px;
			border: none;
			padding: 0;
			color: #6ba3d8;

			&::before {
				display: none;
			}
		}
	}
</style>
